<template>
  <div class="home-view">
    <!-- <HeadTop :recomments="data.searchRecomments" @search="clickSearch" /> -->
    <HeadTop :recomments="searchRecomments" @search="clickSearch" />
  </div>
  <div class="home-wrapper">
    <OpLoadingView :loading="pending" type="skeleton">
      <van-grid square column-num="5" :border="false">
        <van-grid-item
          v-for="item in GridData"
          :key="item.name"
          :icon="item.url"
          :text="item.name"
        />
      </van-grid>
      <ScrollBar :data="scrollBarInfoList" />

      <!-- 轮播图 -->
    <div class="swiper-container">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item
          v-for="item in banner"
          :key="item.imgUrl"
          :style="{ backgroundImage: 'url(' + item.imgUrl + ')' }"
          >1</van-swipe-item
        >
      </van-swipe>
    </div>

    <!-- Tabs切换 -->
    <van-tabs v-model:active="active" offset-top="50" :color="PRIMARY_COLOR">
      <van-tab v-for="item in HOME_TABS" :title="item.title" :key="item.value">
        <component :is="item.component" />
      </van-tab>
    </van-tabs>




    </OpLoadingView>

    
  </div>
</template>

<script lang="ts" setup>
import HeadTop from "./components/HeadTop.vue";
import OpLoadingView from "@/components/OpLoadingView.vue";
import type { ICountdown, IHomeInfo } from "@/types";
import { useAsync } from "@/use/useAsync";
import { fatchHomePageData } from "@/api/home";
import ScrollBar from "./components/ScrollBar.vue";
import {PRIMARY_COLOR} from '@/config'
import { HOME_TABS } from "./config";

// 发送请求方法 fatchHomePageData : api / IHomeInfo : 类型
const { data, pending } = useAsync(fatchHomePageData, {
  banner: [], // banner 轮播图数据
  searchRecomments: [], // 搜索推荐数据
  transformer: [], // banner 轮播图数据
  scrollBarInfoList: [], // 滚动条数据
  countdown: {} as ICountdown, // 倒计时数据
  activities: [], // 活动数据
} as IHomeInfo);
console.log("测试");

const active = 0; // 标签切换


// 头部组件标签数据
const searchRecomments = [
  {
    value: "1",
    label: "推荐1",
  },
  {
    value: "2",
    label: "推荐2",
  },
  {
    value: "3",
    label: "推荐3",
  },
];

// 网格数据
const GridData = [
  {
    url: "https://p0.meituan.net/wmbanner/c6213db2a0bbc6b7342074e9eb51ca4a12844.png",
    name: "美食",
  },
  {
    url: "https://p0.meituan.net/wmbanner/58ffd634fa6dddf05972d2cf2c57733f14610.png",
    name: "鲜花蛋糕",
  },
  {
    url: "https://p0.meituan.net/wmbanner/931b4bfa92a37d0f8c42b846f7d7c3b310738.png",
    name: "甜品饮品",
  },
  {
    url: "https://p0.meituan.net/wmbanner/a21e2929ba2fa539323ef830260e9fd214345.png",
    name: "快食简餐",
  },
  {
    url: "https://p0.meituan.net/wmbanner/8934983cf94fee9b898ffb66316d312d6588.png",
    name: "超市便利",
  },
  {
    url: "https://p0.meituan.net/wmbanner/06b19b9c7f83eb6a81118e8b01d3d42b15585.png",
    name: "午餐优选",
  },
  {
    url: "https://p1.meituan.net/wmbanner/fee33972115b6dbc8f0450c9c015712b16444.png",
    name: "异国料理",
  },
  {
    url: "https://p0.meituan.net/wmbanner/325483c15c7e9550a43c917510bfcc6612958.png",
    name: "美团专送",
  },
  {
    url: "https://p0.meituan.net/wmbanner/8ced60c2b71d719e1b15fd83d7402eba12998.png",
    name: "小吃馆",
  },
  {
    url: "https://p1.meituan.net/wmbanner/5128eaf02f49cf18bacd11e713606a4117638.png",
    name: "家常菜",
  },
];

// 滚动条数据
const scrollBarInfoList = [
  {
    type: "1",
    badge: "赚豆",
    detail: "今天在下一单赚 400 吃货豆",
    btn: "领任务",
  },
  {
    type: "2",
    badge: "赚豆2",
    detail: "今天在下一单赚 400 吃货豆",
    btn: "领任务",
  },
  {
    type: "3",
    badge: "赚3",
    detail: "今天在下一单赚 400 吃货豆",
    btn: "领任务",
  },
];

// 轮播图数据
const banner = [
  {
    imgUrl:
      "https://p0.meituan.net/wmbanner/6450cca3514b9b8a4c16033a7a1d3d8681852.jpg@602w",
  },
  {
    imgUrl:
      "https://p0.meituan.net/wmbanner/8f68ac4d52ba273c1054328d1f44aafb93200.jpg@602w",
  },
  {
    imgUrl:
      "https://p0.meituan.net/wmbanner/e801b990893589a9cfdca05518cae67d90486.jpg@602w",
  },
];

const clickSearch = (e) => {
  console.log("子组件回传的值:" + e);
};
</script>

<style scoped lang="scss">
.swiper-container {
  margin: 0 10px;
  overflow: hidden;
  border-radius: 10px;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #f5f5f5;
}
</style>
